<template>
  <div>
    <sb-tip>为了演示loading效果，做了假延迟，实际使用时可以删掉</sb-tip>
    <h1>当前选中值:{{ brandId }}-{{ serieId }}</h1>
    <a-row>
      <a-col :span="5">
        <a-form-item label="品牌">
          <a-select
            style="width: 180px"
            v-model:value="brandId"
            :loading="loading_brands"
          >
            <a-select-option :value="0"> --请选择品牌-- </a-select-option>
            <a-select-option :value="b.id" v-for="b in brands" :key="b.id">
              {{ b.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item label="车型">
          <a-select
            v-model:value="serieId"
            style="width: 180px"
            :loading="loading_series"
          >
            <a-select-option :value="0"> --请选择车型-- </a-select-option>
            <a-select-option :value="b.id" v-for="b in series" :key="b.id">
              {{ b.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { ref, watch } from "vue";
import { $get } from "~mixins/useRequest";
export default {
  setup(props) {
    let brands = ref([]);
    let brandId = ref(0);
    let loading_brands = ref(false);
    let loading_series = ref(false);
    let serieId = ref(0);
    let series = ref([]);

    async function getBrands() {
      loading_brands.value = true;
      let { data } = await $get("/system/getCarBrands");
      brands.value = data;
      setTimeout(() => {
        loading_brands.value = false;
      }, 1000);
    }

    async function getSeries() {
      loading_series.value = true;
      let { data } = await $get("/system/getCarSeries", {
        brandId: brandId.value,
      });
      series.value = data;
      setTimeout(() => {
        loading_series.value = false;
      }, 1000);
    }

    getBrands();

    watch(brandId, () => {
      serieId.value = 0;
      getSeries();
    });

    return { brands, brandId, series, serieId, loading_series, loading_brands };
  },
};
</script>
